<template>
    <mescroll-vue :down="downOption" :up="upOption" @init="mescrollInit">
        <slot></slot>
    </mescroll-vue>
</template>

<script>
import MescrollVue from './MescrollVue.vue';
// 原谅我上拉 下拉分不清。。。
export default {
  name: 'MescrollVueSlide',
  data() {
    return {
      downOption: {
        auto: false,
        callback: () => {
          const promise = new Promise((resolve) => {
            setTimeout(resolve, 300);
          }); // 最少300ms 后才能结束downLoading
          this.$emit('mescrollInit', (...args) => {
            promise.then(() => {
              this.$_endSuccess(...args);
            });
          });
        },
      },
      upOption: {
        auto: false,
        inited: () => {
          this.upInit = true;
        },
        toTop: this.wrapperId
          ? {
            warpId: this.wrapperId,
            // 回到顶部按钮
            src: require('resources/mescroll-totop.png'), // 图片路径,默认null,支持网络图
            offset: 1000, // 列表滚动1000px才显示回到顶部按钮
          }
          : false,
        callback: () => {
          this.$emit('loadMore', this.$_endSuccess);
        },
        htmlNodata: '<span class="c-gray">没有更多啦...<span>',
        noMoreSize: this.noMoreVisible ? 2 : Number.MAX_VALUE,
        offset: 150,
      },
      mescroll: null,
      upInit: false, // 下拉加载是否初始化完成
    };
  },
  props: {
    upAuto: {
      type: Boolean,
      required: true,
    }, // 是否触发下拉刷新
    wrapperId: {
      type: String,
    },
    noMoreVisible: {
      type: Boolean,
      default() {
        return true;
      },
    },
  },
  watch: {
    init(bol) {
      if (bol) {
        this.mescroll.scrollTo(0, 0);
        this.mescroll.triggerDownScroll();
      }
    },
  },
  computed: {
    init() {
      // mescroll初始化成功  且 下拉加载初始化成功 且 父级让下拉加载
      return Boolean(this.mescroll) && this.upInit && this.upAuto;
    },
  },
  components: {
    MescrollVue,
  },
  methods: {
    $_endSuccess(hasNext) {
      this.mescroll.endSuccess(10, hasNext);
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
  },
};
</script>
<style lang="scss"></style>
